﻿<!DOCTYPE html>
<html lang="tw">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title></title>
    <style type="text/css">
        body
        {
            width: 960px;
            margin: 5px auto;
            font-family: 標楷體;
            border-color: Black;
            border-width: 2 px;
            border-style: solid;
        }
        p
        {
            margin: 0 0 20 0;
        }
        thead
        {
            background: #eee;
        }
        td, th
        {
            border: 1px #ccc solid;
        }
        header #page_header
        {
            width: 100%;
            border: #0000FF 5px solid;
        }
        section#main
        {
            height: 1100px;
        }
        section#panti
        {
            float: left;
            width: 60%;
            padding: 0 0 0 10;
            border-width: 2px;
            border-color: #dddddd;
            border-style: dashed;
        }
        section#panti_side
        {
            float: right;
            width: 38%;
            height: inherit;
            padding: 2px;
            border-width: 1px;
            border-color: #dddddd;
            border-style: dashed;
            font-family: 標楷體;
        }
        section#presay
        {
            float: right;
            font-family: 標楷體;
            font-size: 30px;
            -webkit-writing-mode: vertical-rl;
            border-width: 1px;
            border-color: #dddddd;
            border-style: dashed;
            margin: 0 5px 0 0;
        }
        
        section#pantio_ptions
        {
            font-family: 標楷體;
            width: 170px;
        }
        #putime
        {
            font-size: 22px;
            width: 100%;
            margin: 0 0 10px 0;
            text-align: center;
        }
        #options_table
        {
            font-size: 30px;
            width: 100%;
        }
        #options_table td
        {
            border-color: Gray;
            border-width: 1px;
            border-style: dotted;
        }
        
        footer
        {
            clear: both;
            width: 100%;
            display: block;
            text-align: center;
            height: 100px;
        }
        #mainContent
        {
            margin: 10px;
            border-width: 2px;
        }
        #mainLeft
        {
            width: 120px;
            float: left;
            margin: 10px;
            border-width: 2px;
            border-color: #ff0000;
            border-style: dashed;
        }
        #mainCenter
        {
            float: left;
            margin: 2px;
            border-width: 2px;
            border-color: #ff0000;
            border-style: dashed;
        }
        #mainRight
        {
            width: auto;
            float: left;
            margin: 10px;
            font-size: 24px;
            border-width: 2px;
            border-color: #ff0000;
            border-style: dashed;
        }
        .styleTrans3
        {
            margin: 10px 0 0 0;
            width: 250px;
        }
        .styleClazz4
        {
            margin: 10px 0 0 0;
            width: 250px;
        }
        .styleCZ
        {
            left: 200px;
            top: 300px;
        }
        .styleCZZ
        {
            clear: both;
        }
        .style1
        {
            width: 4px;
        }
        .style5
        {
            font-size: 20px;
            width: 50px;
            text-align: center;
            vertical-align: middle;
        }
        .style9
        {
            font-size: 20px;
            width: 50px;
            height: 50px;
            text-align: center;
            vertical-align: middle;
        }
        .style14
        {
            height: 50px;
        }
        .style25
        {
            font-size: large;
        }
        .style26
        {
            width: 127px;
            height: 50px;
            font-family: 標楷體;
            font-size: large;
        }
        .style27
        {
            font-size: 20px;
            width: 50px;
            height: 80px;
            text-align: center; /*vertical-align: middle;     */
        }
        .style28
        {
            font-size: x-large;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body onload="init();">
    <header id="page_header">
        <span class="style28">乾道館</span></header>
    <section id="main">
        <section id="panti">
            <center>
        <table border=1 width="100%">
            <tr>
                <td class="style26">
                    占卜之事</td>
                <td class="style14">
                    <br />
                    <br />
                    <br />
                    <br />
                    </td>
            </tr>
            </table>   

       <div id="mainContent" >
            <div id="mainLeft"></div>
            <div  id="mainCenter">            
    <table  border=1  class="styleTrans3">
            <tr>
                <td id="t1_f" class="style5">
                    &nbsp;</td>
                <td id="t1_gan" class="style5">
                    &nbsp;</td>
                <td class="style1">
                    <span class="style25">初</span><br class="style25" />
                    <span class="style25">傳</span></td>
                <td id="t1_ji" class="style5">
                    &nbsp;</td>
                <td id="t1_god" class="style5">
                    &nbsp;</td>
            </tr>
            <tr>
                <td id="t2_f" class="style5">
                    &nbsp;</td>
                <td id="t2_gan" class="style5">
                    &nbsp;</td>
                <td class="style1">
                    <span class="style25">中</span><br class="style25" />
                    <span class="style25">傳</span></td>
                <td id="t2_ji" class="style5">
                    &nbsp;</td>
                <td id="t2_god" class="style5">
                    &nbsp;</td>
            </tr>
            <tr>
                <td id="t3_f" class="style5">
                    &nbsp;</td>
                <td id="t3_gan" class="style5">
                    &nbsp;</td>
                <td class="style1">
                    <span class="style25">末</span><br class="style25" />
                    <span class="style25">傳</span></td>
                <td id="t3_ji" class="style5">
                    &nbsp;</td>
                <td id="t3_god" class="style5">
                    &nbsp;</td>
            </tr>
        </table>
    <table border=1 class="styleClazz4">
        <tr>
            <td class="style27" id="c3_god">
                &nbsp;</td>
            <td class="style27" id="c2_god">
                &nbsp;</td>
            <td class="style27" id="c1_god">
                &nbsp;</td>
            <td class="style27" id="c0_god">
                <br />
            </td>
        </tr>
        <tr>
            <td class="style9" >
                <span id="c3_up"></span>
            </td>
            <td class="style9" >
                <span id="c2_up"></span>
            </td>                
            <td class="style9" >
                <span id="c1_up"></span>
            </td>
            <td class="style9" >
                <span id="c0_up"></span>
            </td>
        </tr>
        <tr>
            <td class="style9" id="c3_down">
                &nbsp;</td>
            <td class="style9" id="c2_down">
                &nbsp;</td>
            <td class="style9" id="c1_down">
                &nbsp;</td>
            <td class="style9" id="c0_down">
                &nbsp;</td>
        </tr>
        <tr>
            <td class="style9">
                第<br />
                四<br />
                課</td>
            <td class="style9">
                第<br />
                三<br />
                課</td>
            <td class="style9">
                第<br />
                二<br />
                課</td>
            <td class="style9">
                第<br />
                一<br />
                課</td>
        </tr>
    </table>
        </div>
    <div  id="mainRight">
   <table>
       <tr>
        <td id="transStep"></td>
        
        </tr>
        </table>
   </div>
        
        </div>

        <div style="clear:both"></div>
    
    <canvas id="pan" width="560" height="560" style="border:1px;">
    </canvas>
    </center>
        </section>
        <section id="panti_side">
            <section id="presay">
        伏於民國&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;日吉日良辰
<br />
        為歲次&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;君代占六壬神課，懇時神明示並告年命&nbsp;&nbsp;&nbsp;&nbsp;行年&nbsp;&nbsp;&nbsp;&nbsp; 為禱
<br />
        <br />祝詞：天何言哉，叩之即應，神之靈矣，感而遂通，今有某姓，有某事關心，不知休咎，罔釋厥疑，惟神惟靈，若可若否，望垂昭報，至敬至誠，無不感應。</section>
            <section width="50%" id="pantio_ptions">
                <table id="putime" border="1">
                    <thead>
                        <td colspan="2">
                            占課日期
                        </td>
                    </thead>
                    <tr>
                        <td>
                            年
                        </td>
                        <td id="gj_year">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            月
                        </td>
                        <td id="gj_month">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            日
                        </td>
                        <td id="gj_day">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            月將
                        </td>
                        <td id="mongeneral">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            占時
                        </td>
                        <td id="gj_hour">
                        </td>
                    </tr>
                </table>
                <table id="options_table">
                </table>
            </section>
        </section>
    </section>
    <footer>
    </footer>
    <script language="javascript">

        var MAX_DUMP_DEPTH = 10;

        function dumpObj(obj, name, indent, depth) {
            if (depth > MAX_DUMP_DEPTH) {
                return indent + name + ": <Maximum Depth Reached>\n";
            }
            if (typeof obj == "object") {
                var child = null;
                var output = indent + name + "\n";
                indent += "\t";
                for (var item in obj) {
                    try {
                        child = obj[item];
                    } catch (e) {
                        child = "<Unable to Evaluate>";
                    }
                    if (typeof child == "object") {
                        output += dumpObj(child, item, indent, depth + 1);
                    } else {
                        output += indent + item + ": " + child + "\n";
                    }
                }
                return output;
            } else {
                return obj;
            }
        }
      
    </script>
    <script type="text/javascript">

        var JiGon = { "寅": "甲",
            "辰": "乙",
            "巳": "丙戊",
            "未": "丁己",
            "申": "庚",
            "戌": "辛",
            "亥": "壬",
            "丑": "癸"
        };
        function drawPan(ctx, w, h, pandata) {
            ctx.save();
            var rr = (Math.PI / 180) * 30;
            var fh = 15;
            var base = 130;

            ctx.font = '30px sans-serif';
            ctx.textBaseline = 'middle';
            ctx.translate(w / 2, h / 2);

            ctx.strokeStyle = '#003300';
            ctx.lineWidth = 1;
            ctx.beginPath();
            ctx.arc(0, 0, base - 40, 0, Math.PI * 2, true);
            ctx.stroke();
            ctx.closePath();

            ctx.beginPath();
            ctx.arc(0, 0, base + 24, 0, Math.PI * 2, true);
            ctx.stroke();
            ctx.closePath();

            ctx.beginPath();
            ctx.arc(0, 0, base + 95, 0, Math.PI * 2, true);
            ctx.stroke();
            ctx.closePath();


            ctx.beginPath();
            ctx.arc(0, 0, base + 145, 0, Math.PI * 2, true);
            ctx.stroke();
            ctx.closePath();


            ctx.rotate(-rr);
            ctx.fillStyle = 'rgb(0,0,0)';

            for (var i = 0; i < pandata.length; i++) {
                //ctx.save();
                ctx.rotate(-rr / 2);
                ctx.lineWidth = 1;
                ctx.strokeStyle = '#888';
                ctx.beginPath();
                ctx.moveTo(0, base - 40);
                ctx.lineTo(0, base + 145);
                ctx.stroke();
                ctx.closePath();
                ctx.rotate(rr / 2);
                //ctx.restore();

                ctx.font = '30px 標楷體';
                var 地 = pandata[i]["地"];
                if (JiGon[地] != undefined) {
                    ctx.font = '18px 標楷體';
                    var sub = JiGon[地];
                    ctx.fillText(sub, -9 * sub.length, base - 25);
                }
                ctx.font = '30px 標楷體';
                ctx.fillText(地, -fh, base);

                ctx.save();
                ctx.rotate(-rr *0.30);
                ctx.font = '14px 標楷體';
                if(日空亡!=undefined)
                if (日空亡.indexOf(地) != -1) {
                    ctx.fillStyle = '#ff0000';
                    ctx.fillText('空', -7, base-7);
                }
                if (時空亡 != undefined)
                if (時空亡.indexOf(地) != -1) {
                    ctx.fillStyle = '#00aa00';
                    ctx.fillText('空', -7, base + 7);
                }
                ctx.restore();

                //---------------------------------
                ctx.font = '30px 標楷體';
                var sk = pandata[i]["天"];
                ctx.fillText(sk, -fh, base + 45);
                ctx.save();
                ctx.rotate(-rr *0.22);
                ctx.font = '14px 標楷體';
                if (日空亡 != undefined)
                if (日空亡.indexOf(sk) != -1) {
                    ctx.fillStyle = '#ff0000';
                    ctx.fillText('空', -7, base +45- 7);
                }
                if (時空亡 != undefined)
                if (時空亡.indexOf(sk) != -1) {
                    ctx.fillStyle = '#00aa00';
                    ctx.fillText('空', -7, base +45+ 7);
                }
                ctx.restore();

                
                
                ctx.font = '20px 標楷體';
                ctx.fillText(pandata[i]["支神"], -20, base + 75);
                //--------------------------------
                ctx.font = '20px 標楷體';
                var sk = pandata[i]["天將"];
                ctx.fillText(sk, -20, base + 110);
                ctx.font = '16px 標楷體';
                ctx.fillText(panx["天將五行"][sk], -16, base + 130);


                ctx.rotate(rr);
            }
            ctx.restore();
        }


        function applyTrans3(trans) {
            var trs = [trans["初傳"], trans["中傳"], trans["末傳"]];
            for (i = 1; i <= 3; i++) {
                $('#t' + i + '_ji').html(trs[i - 1]["支"]);
                $('#t' + i + '_god').html(trs[i - 1]["天將"]);
                $('#t' + i + '_gan').html(trs[i - 1]["遁干"]);
                $('#t' + i + '_f').html(trs[i - 1]["六親"]);

            }
        }
        function appluClass4(clazz4) {

            for (i = 0; i < 4; i++) {
                $('#c' + i + '_god').html(clazz4[i]["天將"]);
                $('#c' + i + '_up').html(clazz4[i]["柱"].substr(0, 1));
                $('#c' + i + '_down').html(clazz4[i]["柱"].substr(1, 1));
            }
        }

        function applyPuTime(pandata) {
            $('#gj_year').html(pandata["占課四柱"]["yearGj"]["干支"]);
            $('#gj_month').html(pandata["占課四柱"]["monthGj"]["干支"]);
            $('#gj_day').html(pandata["占課四柱"]["dayGj"]["干支"]);
            $('#mongeneral').html(pandata["月將"]);
            $('#gj_hour').html(pandata["占課四柱"]["hourGj"]["干支"]);


        }
        function applyTransStep(pandata) {
            var steps = pandata["transStep"];
            var content = '';
            $.each(steps, function (index, value) {
                content = content + value + '<br/>';
            });
            $('#transStep').html(content);
        }
        function applySideOptions(options) {

            var opts = ["旬首", "日德", "行年", "日空",
                                "六合", "三合", "旬丁", "驛馬", "天馬", "桃花",
                                "月德", "支德", "支沖", "支刑", "支破", "支害",
                                "旬庚", "旬辛", "旬癸", "時空"]; //, "占法", "晝貴", "夜貴"];
            $.each(opts, function (index, value) {
                // alert(value+ options[value]);
                var vv = options[value];
                if (vv == undefined)
                    vv = "";
                var content = '<tr><td>' + value + '</td><td>' + vv + '</td><td>&nbsp;&nbsp;</td></tr>';
                $('#options_table').append(content);

                //$('#' + index).html(value);
            });
        }

        var 日空亡;
        var 時空亡;
        function init() {
            var canvas = document.getElementById('pan');

            日空亡 = panx["options"]["日空"];
            時空亡 = panx["options"]["時空"];
            var data = ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥'];
            if (canvas.getContext) {
                var ctx = canvas.getContext('2d');
                ctx.fillStyle = 'rgb(250,250,250)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                //drawonCanvas(ctx, canvas.width, canvas.height);
                drawPan(ctx, canvas.width, canvas.height, panx["盤"]);
            }
            applyTrans3(panx["三傳"]);
            appluClass4(panx["課"]);
            applySideOptions(panx["options"]);
            applyPuTime(panx);
            applyTransStep(panx);


        }
    </script>
    <script type="text/javascript">

        var panx = {
  "日期": "0001-01-01T00:00:00",
  "三傳": {
    "初傳": {
      "支": "亥",
      "遁干": "癸",
      "天將": "貴人",
      "六親": "官鬼"
    },
    "中傳": {
      "支": "申",
      "遁干": "庚",
      "天將": "玄武",
      "六親": "妻財"
    },
    "末傳": {
      "支": "巳",
      "遁干": "丁",
      "天將": "天空",
      "六親": "兄弟"
    }
  },
  "課": [
    {
      "天將": "青龍",
      "柱": "辰丁"
    },
    {
      "天將": "朱雀",
      "柱": "丑辰"
    },
    {
      "天將": "六合",
      "柱": "寅巳"
    },
    {
      "天將": "貴人",
      "柱": "亥寅"
    }
  ],
  "盤": [
    {
      "id": 0,
      "地": "亥",
      "天將": "玄武",
      "天": "申",
      "支神": "傳送"
    },
    {
      "id": 0,
      "地": "子",
      "天將": "太陰",
      "天": "酉",
      "支神": "從魁"
    },
    {
      "id": 0,
      "地": "丑",
      "天將": "天后",
      "天": "戌",
      "支神": "河魁"
    },
    {
      "id": 0,
      "地": "寅",
      "天將": "貴人",
      "天": "亥",
      "支神": "登明"
    },
    {
      "id": 0,
      "地": "卯",
      "天將": "騰蛇",
      "天": "子",
      "支神": "神后"
    },
    {
      "id": 0,
      "地": "辰",
      "天將": "朱雀",
      "天": "丑",
      "支神": "大吉"
    },
    {
      "id": 0,
      "地": "巳",
      "天將": "六合",
      "天": "寅",
      "支神": "功曹"
    },
    {
      "id": 0,
      "地": "午",
      "天將": "勾陳",
      "天": "卯",
      "支神": "太沖"
    },
    {
      "id": 0,
      "地": "未",
      "天將": "青龍",
      "天": "辰",
      "支神": "天罡"
    },
    {
      "id": 0,
      "地": "申",
      "天將": "天空",
      "天": "巳",
      "支神": "太乙"
    },
    {
      "id": 0,
      "地": "酉",
      "天將": "白虎",
      "天": "午",
      "支神": "勝光"
    },
    {
      "id": 0,
      "地": "戌",
      "天將": "太常",
      "天": "未",
      "支神": "小吉"
    }
  ],
  "月將": null,
  "占課四柱": {
    "yearGj": {
      "干支": null
    },
    "monthGj": {
      "干支": null
    },
    "dayGj": {
      "干支": "丁巳"
    },
    "hourGj": {
      "干支": "_卯"
    }
  },
  "options": {
    "占法": "晝占",
    "旬首": "寅",
    "旬丁": "巳",
    "旬庚": "申",
    "旬辛": "酉",
    "旬癸": "丑",
    "六合": "申",
    "支沖": "亥",
    "日德": "亥",
    "支德": "戌",
    "天馬": "子",
    "驛馬": "亥",
    "桃花": "午",
    "支刑": "申",
    "支破": "申",
    "干害": "戌",
    "支害": "子",
    "日空": "子丑",
    "三合": "酉丑",
    "陷落": "酉戌"
  },
  "發用課": 3,
  "clazznote": "",
  "發用": "亥寅",
  "太歲": "",
  "月建": "",
  "行年": "",
  "貴人順逆": "順行",
  "天將五行": {
    "貴人": "己丑",
    "騰蛇": "丁巳",
    "朱雀": "丙午",
    "六合": "乙卯",
    "勾陳": "戊辰",
    "青龍": "甲寅",
    "天空": "戊戌",
    "白虎": "庚申",
    "太常": "己未",
    "玄武": "癸亥",
    "太陰": "辛酉",
    "天后": "壬子"
  },
  "transStep": [
    "遙剋",
    "蒿矢"
  ],
  "不備": false,
  "八專": false,
  "伏吟": false,
  "返吟": false,
  "日干寄宮": "未",
  "干上": "辰",
  "日干": "丁",
  "日干支": "丁巳",
  "支上": "寅",
  "日支": "巳",
  "時支": "卯"
};
        
    </script>
</body>
</html>
